//创建一个路由器,并暴露出去

//第一步:引入createRouter
import {
  createRouter,
  createWebHistory,
  createWebHashHistory,
} from "vue-router";
//引入一个一个可能要呈现的组件
import Home from "@/pages/Home.vue";
import News from "@/pages/News.vue";
import About from "@/pages/About.vue";
import Detail from "@/pages/Detail.vue";

//第二步:创建路由器
const router = createRouter({
  history: createWebHistory(), //路由器的工作模式   url不带#号,缺点:需要服务端配合处理路径问题,否则刷新会有404错误
  // history: createWebHashHistory(), //路由器的工作模式  url带#号,不需要服务端配合处理路径问题，缺点:在SEO优化方面相对较差
  routes: [
    //一个一个的路由规则
    {
      name: "zhuye",
      path: "/home",
      component: Home,
    },
    {
      name: "xinwen",
      path: "/news",
      component: News,
      children: [
        {
          name: "xiang",
          // path: "detail/:id/:title/:content?", params路径写法
          path: "detail", //query路径写法
          component: Detail,

          //第一种写法:将路由收到的所有params参数作为props传给路由组件
          // props: true,

          //第二种写法:函数写法:可以自己决定将什么作为props给路由组件
          props(route) {
            return route.query; //当想传params参数时只需改成route.params即可，但是第一种写法更好没必要写成这样
          },

          //第三种写法:对象写法:可以自己决定将什么作为props给路由组件   很少用了解即可
          // props: {},

          //以上三种写法的底层类似 <Detail id=?? title=?? content=?? />
        },
      ],
    },
    {
      name: "guanyu",
      path: "/about",
      component: About,
    },
  ],
});

export default router;
